<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>其他等级新闻</title>

    <div th:include="common :: headcommon"></div>
    <script src="/js/index/article.js" type="text/javascript"></script>
    <script type="text/javascript">

    </script>
</head>
<body>

<div th:replace="common :: #top_start"></div>

<div class="layui-container container">

    <div class="layui-row layui-col-space20">
        <div class="layui-col-md8">
            <div>
              <span class="layui-breadcrumb">
                 <a th:href="@{/index}">首页</a>
                 <a><cite>等级为[[${level}]]的用户新闻：</cite></a>
              </span>
                <hr class="layui-bg-red">
                <!--                搜索框-->
                <div class="layui-row">
                    <form class="layui-form" method="post" th:action="@{/article/other/{lid}(lid=${level})}">
                        <input type="hidden" name="level" th:value="${level}">
                        <div class="layui-inline">
                            <select name="cid" lay-verify="type">
                                <option value="">请选择分类</option>
                                <option  th:value="${category.cid}"  th:each="category:${session.cateList}" th:text="${category.cname}">写作</option>
                            </select>
                        </div>
                        <div class="layui-inline" style="width: 50%;" >
                                <input type="text" name="keyword"  placeholder="请输入关键字"
                                       class="layui-input" >
                        </div>
                        <button type="submit" class="layui-btn" lay-filter="search" lay-submit>搜索</button>
                    </form>
                </div>


<!--                数据显示-->
                <div id="otherNews"></div>
                <div id="otherPages"></div>
                <!--     分页处理-->
                <script  th:inline="javascript">
                    $(function(){
                        //数字1为从第一页开始访问，8为每页显示数据
                        queryAll(1,8);
                    })
                    function queryAll(pageNum,pageSize){
                        $.ajax({
                            type: 'POST',
                            url: "/article/other/levelResult", // ajax请求路径
                            async:false,
                            dataType: 'json',
                            data: {
                                "pageNum":pageNum,
                                "pageSize":pageSize,
                                "cid":[[${cid}]],
                                "level":[[${level}]],
                                "keyword":[[${keyword}]]
                            },
                            success: function(data)
                            {
                                console.log(data)
                                var rec = data;
                                // console.log("res里的内容"+rec)
                                newsNum = rec.data.length;
                                // console.log("分类内容"+newsNum)
                                count = rec.count;
                                layui.use('laypage', function()
                                {
                                    var laypage = layui.laypage;
                                    laypage.render({
                                        elem: 'otherPages' //注意，这里的 pages 是 ID，不用加 # 号
                                        ,curr: pageNum //获取起始页
                                        , limit: pageSize                     //每页显示条数
                                        ,count: count //数据总数，从服务端得到
                                        ,limits:[8,16,24]
                                        ,layout:['prev', 'page', 'next','limit','count','skip']
                                        //跳转页码时调用
                                        , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
                                            //非首次加载 do something
                                            if (!first) {
                                                //调用加载函数加载数据
                                                queryAll(obj.curr,obj.limit);
                                                layer.msg('第 '+ obj.curr +' 页');
                                                //返回顶部
                                                $(window).scrollTop(0);
                                                // window.location.href='/';
                                            }
                                        }
                                    });
                                    $("#otherNews").children().remove();
                                    for(let i=0;i<newsNum;i++){
                                        //图片详细路径
                                        var detId="/article/details/"+rec.data[i].id;
                                        // console.log(detId);
                                        var div='<div class="article-list">'+
                                            // '<figure><img th:src="${articles.imgSrc}" src="'+rec.data[i].imgSrc+'"></figure>'+
                                            '<ul>'+
                                            '   <h3>'+
                                            // '<a href="/article/details/"'+res.data[i].id+'>'+res.data[i].title+'</a>'+
                                            '<a href='+detId+'>'+rec.data[i].title+'</a>'+
                                            '</h3>'+
                                            '<div class="areahigh">'+
                                            '<p>'+rec.data[i].content+'</p>'+
                                            '</div>'+
                                            '<p class="autor">'+
                                            // ' <span class="lm f_l"><a  href="/cate/CateArticle/'+rec.data[i].category.cid+'"> '+rec.data[i].category.cname+'</a></span>'+
                                            ' <span class="lm f_l"><a  href="#"> '+rec.data[i].category.cname+'</a></span>'+
                                            '<span class="dtime f_l">'+rec.data[i].createTime+'</span>'+
                                            '<span class="viewnum f_r">浏览（<a href="#">'+rec.data[i].checkNum+'</a>）</span>'+
                                            '</p>'+
                                            '</ul>'+'</div>';
                                        $("#otherNews").append(div);
                                    }

                                })
                            }
                        });
                    }
                </script>



            </div>
        </div>

        <!--        左边栏-->
        <div class="layui-col-md4">

            <form class="layui-form" method="post" action="/article/search">
                <div class="layui-form-item">
                    <div class="layui-input-inline" style="width:76%;">
                        <input type="text" name="keyword" lay-verify="required" placeholder="请输入关键字"
                               class="layui-input">
                    </div>
                    <button type="submit" class="layui-btn" lay-filter="search" lay-submit>搜索</button>
                </div>
            </form>

            <div class="ad"><img lay-src="/images/ad.jpg"></div>
            <div class="ms-top">
                <ul class="hd" id="tab">
                    <li class="cur"><a>点击排行</a></li>
                </ul>
            </div>
            <div class="ms-main" id="ms-main">
                <div style="display: block;" class="bd bd-news">
                    <ul>
                        <li th:each="rowlist:${session.rowLists}"><a href="#" target="_blank"
                                                                     th:text="${rowlist.getTitle()}"
                                                                     th:href="@{/article/details/{id}(id=${rowlist.getId()})}">住在手机里的朋友</a>
                        </li>

                    </ul>
                </div>

            </div>

            <div>
                <div class="bd-news">
                    <h3 class="per_test">最新新闻</h3>
                    <ul>
                        <li th:each="newList:${session.newLists}"><a href="#" target="_blank"
                                                                     th:text="${newList.getTitle()}"
                                                                     th:href="@{/article/details/{id}(id=${newList.getId()})}">原来以为，一个人的勇敢是，删掉他的手机号码...</a>
                        </li>

                    </ul>
                </div>
            </div>


            <div class="tuwen">
                <h3>最新评论新闻</h3>
                <ul>
                    <!--                    <li><a href="#"><img lay-src="/images/01.jpg"><b>住在手机里的朋友</b></a>-->
                    <li th:each="newArt:${session.newComArt}" style="width: 320px;">
                        <a href="#" th:href="@{/article/details/{id}(id=${newArt.getId()})}"><b
                                th:text="${newArt.getTitle()}" class="newComArt">住在手机里的朋友</b></a>
                        <p><span class="tulanmu">
                            <a th:each="category:${session.cateList}" href="#" target="_blank"
                               th:if="${category.cid==newArt.cid}"
                               th:text="${category.getCname()}"
                               th:href="@{/cate/CateArticle/{cid}(cid=${category.cid})}">新闻分类</a></span>
                            <span class="tutime"
                                  th:text="${#dates.format(newArt?.createTime, 'yyyy-MM-dd')}">2015-02-15</span>
                        </p>
                    </li>
                </ul>
            </div>


            <div class="ad"><img lay-src="/images/03.jpg"></div>
            <div class="links">
                <h3>友情链接</h3>
                <!--                <h3><span>[<a href="#">申请友情链接</a>]</span>友情链接</h3>-->
                <ul>
                    <li><a href="https://www.runoob.com/" target="_blank">菜鸟教程</a></li>
                    <li><a href="https://www.w3school.com.cn/index.html" target="_blank">W3school</a></li>
                    <li><a href="https://www.layui.com" target="_blank">Layui官网</a></li>
                    <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
                    <li><a href="https://news.163.com/" target="_blank">网易新闻</a></li>
                    <li><a href="http://news.sohu.com/" target="_blank">搜狐新闻</a></li>
                    <li><a href="https://news.qq.com/" target="_blank">腾讯新闻</a></li>
                    <li><a href="https://news.sina.com.cn/" target="_blank">新浪新闻</a></li>
                </ul>
            </div>

        </div>
    </div>
</div>

<div th:replace="common :: #foot_start"></div>

</body>
</html>
